<!DOCTYPE html>
<#assign ctx=Session.basePath>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>VTS管理</title>
    <script>
        var shipid = '<#if shipid??>${shipid}<#else></#if>';
        var company =  '<#if company??>${company}<#else></#if>';
    </script>
    <link href="${ctx}/easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
    <link href="${ctx}/easyui/themes/icon.css" rel="stylesheet" />
    <link href="${ctx}/inspiniain/font-awesome/css/font-awesome.css" rel="stylesheet">
    <script src="${ctx}/js/jquery-1.12.2.min.js"></script>
    <script src="${ctx}/lib/jquery.form.js"></script>
    <script src="${ctx}/easyui/jquery.easyui.min.js"></script>
    <script src="${ctx}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="${ctx}/pagination/js/layer/layer.js"></script>

    <script type="text/javascript">
        function loadAll(){
            var pager = $('#dg').datagrid({
                fitColumns:true,
                fit: true,
                loadFilter: function(data){
                    if(data != null && data.rows != null){
                        for(var i = 0; i < data.rows.length; i++){
                            var record = data.rows[i];
                            //console.log(record);
                            var isValid="";
                            if(record.isValid == "1"){
                                isValid="有效";
                            }else if(record.isValid == "0"){
                                isValid="无效";
                            }else{
                                isValid="待定";
                            }
                            var midLon = record.midLon;
                            var midLat = record.midLat; //coordinate
                            var position = "<a href='#' onclick='showVts(\""+midLon+"\",\""+midLat+"\",\""+record.title+"\",\""+record.guid+"\",\""+record.isValid+"\")'><i style='font-size:20px;' class='fa fa-map-marker' aria-hidden='true'></i></a>";
                            var drop = "<a href='#' onclick='dropVTS(\""+record.guid+"\")'>删除</a>";
                            record.drop = drop;
                            record.position=position;
                            record.state="<a href='#' onclick='setVtsState(\""+midLon+"\",\""+midLat+"\",\""+record.title+"\",\""+record.guid+"\",\""+record.isValid+"\")'>"+isValid+"</a>";
                            if(record.remark!=null){
                                if(record.remark.length>18){
                                    record.remark = "<span title='"+record.remark+"'>"+record.remark.substring(0,18)+"......"+"</span>";
                                }else{
                                    record.remark = "<span>"+record.remark+"</span>";
                                }
                            }
                        }
                    }
                    return data;
                }
            });
        }
        $(function(){
            loadAll();

            $(".btn-search").click(function () {
                $('#dg').datagrid("load",{
                    title:$("#title").val(),
                    isValid : $("#state").combobox('getValue')
                })
            })
        })
        function dropVTS(id){
            $.ajax({
                url:'${ctx}/manage/map/dropAlert',
                data:{guid:id},
                success: function (data) {
                    if(data){
                        loadAll();
                        window.parent.refreshAll(id);
                    }
                }
            });
        }
        function showVts(lon,lat,title,id,isvalid) {

            if(isvalid=="1"){
                window.parent.reportLineSource.clear();
                window.parent.waterSource.clear();
                window.parent.locWater(lon,lat,title);
                window.parent.showVtsInfo(id);
            }
        }

        function setVtsState(lon,lat,title,guid,state){
            if(state!=null){
                if(state == "1"){
                    state = "0";
                    window.parent.hidePop(window.parent.mapArray[0]);
                }else if(state == "0"){
                    state="1";
                }
            }else{
                state="1";
            }
            $.ajax({
                url:'${ctx}/manage/map/setAlert',
                data:{guid:guid,state:state},
                success: function (data) {
                    if(data){
                        loadAll();
                        if(state=="1")
                        {
                            window.parent.findVts(guid);
                        }else
                     if(state=='0')
                        {
                            window.parent.refreshAll(guid);
                        }

                    }
                }
            });

        }
    </script>
    <style type="text/css">
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="tb" style="padding:5px;height:auto">
    <div>
        标题: <input type="text" name="title" id="title" style="width: 100px;" />
        状态：<select id="state" class="easyui-combobox" style="width:100px">
        <option value="1">有效</option>
        <option value="2">无效</option>
    </select>
        <a href="#" class="easyui-linkbutton btn-search" iconCls="icon-search" style="width: 80px;">查找</a>
    </div>
</div>
<table id="dg"
       data-options="rownumbers:true,singleSelect:true,pagination:true,url:'${ctx}/manage/map/allAlertList?shipid=<#if shipid??>${shipid}<#else></#if>&company=<#if company??>${company}<#else></#if>',method:'post',toolbar:'#tb'">
    <thead>
    <tr>
        <th data-options="field:'title',width:230">标题</th>
        <th data-options="field:'content',width:300">内容</th>
        <th data-options="field:'remark',width:150">说明</th>
        <th data-options="field:'state',width:60,align:'center'">显示</th>
        <th data-options="field:'drop',width:60,align:'center'">删除</th>
        <th data-options="field:'position',width:60,align:'center'">定位</th>
    </tr>
    </thead>
</table>
</body>
</html>
